import React, { useEffect, useRef, useState } from 'react';
import styles from './index.module.scss';
import { Breadcrumb } from '@alifd/next';
import { observer, inject } from "mobx-react";
import CardModel from '@/models/card-stage';
import { Link } from 'react-router-dom';
import PageHeader from '@/components/PageHeader';

const BreadLinks = (props: {
    routePath: string
    cardModel?: any
}) => {
    const [links, setLinks] = useState<any[]>([]);
    const [projectId, setProjectId] = useState(null);
    const initLinks = async () => {
        const pathArrs = props.routePath;
        const cardModel = props.cardModel;
        const tempLinks = [];
        let parentPath = [];
        for (var i = 1; i < pathArrs.length; i++) {
            const item = pathArrs[i];
            const nodeData = await cardModel.getCardData(item);
            parentPath.push(nodeData.id);
            tempLinks.push({
                path: `/target_detail/${props.cardModel.projectId}/${parentPath.join('/')}`,
                name: nodeData.title
            });
        }
        console.log(tempLinks, '---------');
        setLinks(() => {
            return tempLinks;
        });
    }
    useEffect(() => {
        initLinks();
        return () => {
        }
    }, [props.routePath]);
    return (
        <Breadcrumb>
            {
                links.map((item, index) => {
                    return <Breadcrumb.Item key={item.id} >
                        <Link to={item.path} >{item.name}</Link>
                    </Breadcrumb.Item>
                })
            }
        </Breadcrumb>
    );
};

export default inject('cardModel')(observer(BreadLinks));
